<template>
  <div>
    <item-list></item-list>
    <div class="body">
      <div class="left"></div>
      <div class="right">
        <p>关注明星&nbsp;发现精彩</p>
        <p>你可以关注明星和好友品味他们的私房歌单</p>
        <p>通过他们的动态发现更多精彩音乐</p>
        <div class="button"></div>
      </div>
    </div>
    <foot></foot>
  </div>
</template>

<script>
import ItemList from "@/components/content/smallnav/ItemList";
import Foot from "@/components/content/foot/Foot";

export default {
  components: {
    ItemList,
    Foot
  }
};
</script>

<style scoped>
.body {
  display: flex;
  padding: 100px 80px;

  width: 980px;
  height: 550px;
  margin: 0 auto;
  background-color: #fff;
}

.left {
  width: 495px;
  height: 325px;
  background: url(~@/assets/img/friend.jpg) -36px -43px;
}

.right {
  padding: 80px 0 0 20px;
}

.right p {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}
.right p:nth-child(1) {
  color: #000;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
}

.button {
  margin-top: 20px;
  width: 157px;
  height: 48px;
  background: url(~@/assets/img/friend.jpg) -535px -260px;
  cursor: pointer;
}
.button:hover {
  background-position: 0 -430px;
}
</style>